<template>
    <div>
        <input type="file" accept=".xls, .xlsx" @change="handleFileUpload"/>
        <div v-html="tableHTML"></div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import * as XLSX from 'xlsx'

const tableData = ref([])
const tatbleHeaders = ref([])
const tableHTML = ref('')

const handleFileUpload = (event) => {
    const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });

        // 获取第一个工作表
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];

        // 将工作表转换为 HTML 表格
        tableHTML.value = XLSX.utils.sheet_to_html(worksheet);
      };
      reader.readAsArrayBuffer(file);
}
</script>

<style lang="scss" scoped>

</style>